<template>
    <div class="homeBoard" :class="{'divDisappear':addOperation}">
        <div class="functionBoard">
            <div class="options">
                <button type="button" class="textButton newTextButton" @click="addNewConversation()">新建对话<el-icon><Plus /></el-icon></button>
            </div>
                
            <div class="conversationList">
                <span class="flagText">历史对话</span>
                <template v-if="allconversation[0]">
                    <template v-for="conversation in allconversation" :key="conversation.id">
                        <div class="conversation">
                            <span class="textWithIcon conversationTitle" @click="startConversation(conversation.id)"><el-icon><ChatDotSquare /></el-icon>    {{conversation.AI_role}}</span>
                            <el-icon class="conversationOperation" @click="deleteConversation(conversation.id)"><Close /></el-icon>
                        </div>
                    </template>
                </template>
                <template v-else>
                    <div class="tipForNull no-copy">——您还没有拜访过任何角色——</div>
                </template>
                


            </div>
        </div>
        <div class="welcomeBoard">
            <div class="welcomeContent">
                <span class="BigTitle">Welcom to VirtualChat</span>
                <div class="Guide"></div>
                <flashCoolText class="cop"  coolText="IMMORTALITY" />
            </div>
        </div>
        <div class="introductionBoard">

        </div>


    </div>

    <div class="AddBoard" :class="{'AddBoard-slideIn':addOperation}">
        <div class="childWindowOption"><el-icon class="buttonIcon" @click="closeAddBoard()"><Close /></el-icon></div>
        <div class="childWindowContent">
            <el-form class="newConversationForm"
                ref="addFormRef"
                :model="newConversationAddForm"
                :rules="newConversationAddFormRule"
                label-width="auto"
            >
                <el-form-item label="想要与谁交流？" prop="AI_role">
                    <el-input v-model="newConversationAddForm.AI_role"></el-input>
                </el-form-item>

                <button type="button" class="textButton submitButton" @click="newConversationSubmit(currentId)">建立对话</button>
            </el-form>

            <span class="flagText" style="flex: 1;">输入角色全名以保证AI扮演的准确性</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {  ref } from 'vue';
import { useConversationStore } from '../../stores/conversationStore';
import { useUsersStore } from '../../stores/usersStore';
import request from '../../utils/request';
import router from '../../routers';

const addFormRef=ref()
const userInfo=useUsersStore().currentUser;
const currentId=ref<number>(userInfo?.id as number)
const newConversationAddForm=ref({
    AI_role:''
})
const newConversationAddFormRule={
    AI_role:[
        {required:true,message:'请输入你想交谈角色',trigger:'input'}
    ]
}
const addOperation=ref(false);
const allconversation=ref()
await useConversationStore().updateUserAllConversation();

allconversation.value=useConversationStore().getAllConversationYourCreated
//allconversation.value=[]

async function addNewConversation(){
    newConversationAddForm.value.AI_role=''
    addOperation.value=true
}

async function newConversationSubmit(id:number){
    try{
        await addFormRef.value.validate()
        await request.post('/api/deepSeek/newDialog',{id:id,dialogRole:newConversationAddForm.value.AI_role});
        await useConversationStore().updateUserAllConversation();
        allconversation.value=useConversationStore().getAllConversationYourCreated
        addOperation.value=false
    }catch(error){
        console.error('不符合提交规则',error)
    }
}

async function deleteConversation(id:number){
    try{
        const result = await request.delete(`/api/deepSeek/conversation/${id}`);
        if(!result.result){
            return console.error('删除失败！')
        }
        await useConversationStore().updateUserAllConversation();
        allconversation.value=useConversationStore().getAllConversationYourCreated
    }catch(error){
        console.error('未知的删除失败',error)
    }
}

function closeAddBoard(){
    addOperation.value=false
}

async function startConversation(id:number){
    try{
        console.log(id)
        router.push(
            {
                name:'dialog',
                params:{
                    id:id
                }
            }
        )
    }catch(error){
        console.log('查看对话失败',error)
    }
}

</script>

<style scoped>
    .submitButton{
        margin-top: 5%;
        width: 100%;
        color: rgba(255, 255, 255, 0.9);
        background-color: rgba(13, 55, 206, 0.8);
        border-radius: 10px;
        padding-left: 10px;
        padding-right: 10px;
        box-shadow: 1px 1px 4px rgb(0, 0, 0);
    }

    .newConversationForm{
        flex: 8;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .AddBoard{
        display: flex;
        flex-direction: column;
        position: fixed;
        padding: 10px;
        width: 20%;
        height: 50%;
        top: -40%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: rgb(255, 255, 255);
        box-shadow: 4px 2px 16px rgb(0, 0, 0);
        border-radius: 15px;
        transition: all 0.4s ease;
        pointer-events: none
    }

    .AddBoard-slideIn{
        top: 40%;
        pointer-events: auto
    }

    .childWindowOption{
        flex: 1;
        display: flex;
        justify-content: right;
        width: 100%;
    }

    .childWindowContent{
        flex: 8;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px;
        align-items: center;
    }

    .homeBoard{
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
        background-color: rgb(255, 255, 255,0.8);
    }

    .functionBoard{
        width: 100%;
        flex: 1;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        background-color: rgb(255, 255, 255,0.1);
        display: flex;
        flex-direction: column;
        min-width: 0
        
    }

    .welcomeBoard{
        width: 100%;
        flex: 3;
        position: relative;
        background-color: rgb(0, 0, 0,0);
    }

    .welcomeContent{
        width: 90%;
        height: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border: 1px solid rgb(0, 0, 0,0.1);
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(0, 0, 0);
    }

    .introductionBoard{
        width: 100%;
        flex: 1;
        background-color: rgb(255, 255, 255,0.3);
    }

    .conversationList{
        margin:10px;
        margin-top: 0px;
        border-top: 1px solid rgb(0, 0, 0,0.1);
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow-y: auto;
    }

    .conversation{
        width: 100%;
        overflow: hidden;
        border-radius: 5px;
        margin-top: 5px;
        font-size: 90%;
        padding-left: 10px;
        display: flex;
    }

    .conversationTitle{
        color: rgba(0, 0, 0, 0.9);
        font-family: Georgia, 'Times New Roman', Times, serif;
        display: inline-block;
        width: 100%;
        flex: 5;
        transition: all ease 0.3s;
        padding: 2px;
        border-radius: 10px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 溢出时显示省略号 */
    }

        .conversationTitle:hover{
            background-color:rgb(0, 0, 0,0.2);
        }

    .conversationOperation{
        flex: 1;
        height: 100%;
        cursor: pointer;
        transition: all ease 0.3s;
        border-radius: 10px;
        opacity: 0.3;
    }

        .conversationOperation:hover{
            background-color: rgb(0, 0, 0,0.5);
            
        }

    .options{
        margin: 5px;
        padding: 5px;
    }   

    .newTextButton{
        color: rgba(0, 106, 227, 0.7);
        border-radius: 15px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .newTextButton:hover{
        background-color: rgba(0, 119, 255, 0.2);
    }

    .tipForNull{
        margin: 5px;
        padding: 5px;
        width: 100%;
        font-size: 50%;
        color: rgb(0, 0, 0,0.3);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .BigTitle{
        flex: 1;
        margin: 5%;
        margin-bottom: 0;
        font-family: fantasy;
        font-size: 300%;
        color: rgba(255, 255, 255,0);
        text-shadow: 1px 2px 1px rgba(255, 255, 255),
                    1px 2px 6px rgba(255, 255, 255, 0.6),
                    2px 4px 8px rgba(255, 255, 255, 0.4)
        ;
    }

    .Guide{
        flex: 4;
        width: 100%;
        height: 100%;
        
    }

    .cop{
        flex: 1;
        
    }
</style>